import React, {} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
} from 'react-native';

import Config from '../../config';
import SizeUtils from '../../common/SizeUtils';
import {DateUtils} from '../../utils/Utils';
import TImage from '../../components/TImage';
import BaseItem from '../common/BaseItem';
import WH_Constants from './WH_Constants';
const NUM_IMAGES = [require("../../../resource/images/common/1.png"), require("../../../resource/images/common/2.png"),
  require("../../../resource/images/common/3.png"),require("../../../resource/images/common/4.png"),
  require("../../../resource/images/common/5.png"),require("../../../resource/images/common/6.png"),
  require("../../../resource/images/common/7.png"),require("../../../resource/images/common/8.png"),
  require("../../../resource/images/common/9.png"),require("../../../resource/images/common/10.png")];

export default class WH_PostItemView extends BaseItem {
  render() {
    return(
      <TouchableOpacity
        style={{flexDirection:"column",
            paddingLeft:SizeUtils.translateDesignWidthToCode(40),
            paddingRight:SizeUtils.translateDesignWidthToCode(40),
            paddingBottom:SizeUtils.translateDesignHeightToCode(16),
            paddingTop:SizeUtils.translateDesignHeightToCode(16),
            borderColor:"#eeeeee",
            borderBottomWidth:SizeUtils.translateDesignNumToCode(3)}}
          onPress={this._onPressItem.bind(this)}>
          {!this._getIsWXTW() && this._renderTitle()}
          {this._renderContent()}
          {this._renderBottomText()}
      </TouchableOpacity>
    )
  }

  _onPressItem() {
    if (this.props.data.content) {
      if(this.props.data.content.indexOf("https://mp.weixin.qq.com") === 0 ||
        this.props.data.content.indexOf("http://mp.weixin.qq.com") === 0) {
        this.gotoPage(Config.pages.chuangxin_web, {url:this.props.data.content, data:this.props.data});
      }
      else {
        this.gotoPage(Config.pages.wh_content, this.props.data);
      }
    }else{
      this.gotoPage(Config.pages.wh_content, this.props.data);
    } 
  }

  _renderTitle() {
    return(
      <View style={{}}>
        <Text style={{fontSize:SizeUtils.translateFontSizeToCode(32), color:"#333333",
            fontWeight:"bold"}} numberOfLines={1}>
          {this._getTitle()}
        </Text>
        {this._renderTopImage()}
        {this._renderNumImage()}
      </View>
    )
  }

  _getTitle() {
    let left = "";
    if(this._getShowtTop()) {
      left = "           ";
    }
    else if (this._getShowNum()) {
      left = "       ";
    }
    if(this.props.data.tag === WH_Constants.TAG.JDZ.tag) {
        return left + "[" + WH_Constants.getTypeDataBySubTag(this.props.data.sub_tag) + "] " + this.props.data.title;
    }
    return left + this.props.data.title;
  }

  _getShowtTop() {
    return this.props.data.top == 1 && this.props.showTop === true;
  }

  _renderTopImage() {
    if(this._getShowtTop()) {
      return(
        <TImage source={require("../../../resource/images/workhard/zhiding.png")}
          style={{width:63, height:30,
            position:"absolute", top:(SizeUtils.translateDesignHeightToCode(40) - SizeUtils.translateDesignWidthToCode(30))/2}}/>
      )
    }
  }

  _getShowNum() {
    return this.props.data.tag == 1 && this.props.showNum === true && this.props.index < 10;
  }

  _renderNumImage() {
    if(this._getShowNum()) {
      return(
        <View style={{position:"absolute", top:0,}}>
        <TImage source={NUM_IMAGES[this.props.index]} style={{
          width:45, height:53}}/>
        </View>
      )
    }
  }

  _renderImage() {
    if(this.props.data.image_urls && this.props.data.image_urls != null) {
      let image_url = this.props.data.image_urls.length > 0 ? this.props.data.image_urls[0] : "";
      return(
        <View style={{
            paddingRight:SizeUtils.translateDesignHeightToCode(26)}}>
          <TImage source={{uri:image_url}} isMini={true}
            style={{width:180, height:140}}/>
        </View>
      )
    }
  }

  _renderContent() {
    let isWXTW = this._getIsWXTW();
    return(
      <View style={{flex:1, flexDirection:"row", paddingTop:SizeUtils.translateDesignHeightToCode(20)}}>
        {this._renderImage()}
        <View style={{flex:1, flexDirection:"column"}}>
          {isWXTW && this._renderTitle()}
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(26), color:"#999999",
                lineHeight:SizeUtils.translateDesignHeightToCode(40),}}
              numberOfLines={4}>
            {this.props.data.content}
          </Text>
        </View>
      </View>
    )
  }

  _getIsWXTW() {
    return this.props.data.tag === WH_Constants.TAG.WXTW.tag;
  }

  _renderBottomText() {
    if(this.props.data.title) {
      return(
        <View style={{flex:1}} >
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(22), color:"#999999", paddingTop:SizeUtils.translateDesignHeightToCode(30)}}>
            {this.props.data.likers_num + " 赞 · " + this.props.data.comments_num +
              " 评论 · " + this.props.data.readers_num + " 阅读 · 发布时间: " + DateUtils.formatDate2(this.props.data.posted_at)}
          </Text>
        </View>
      )
    }
  }
}
